/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import { Icon, Tabs } from 'antd-mobile-rn';

// project
import {
    Page, Content, Header, Row, Between, ItemY, Text, Image, TouchOpacity
} from '../../../../library';

/******************************************************************************************
 * Export
 ******************************************************************************************/

export default class MyCollection extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
    constructor (props) {
        super(props);
        this.Nav = this.props.navigation;

        /**
         * state
         */
        this.state = {
            tabList:[
                { title: '商品' },
                { title: '商家' },
            ]
        };
    }

    /*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
    renderTabBar() {
        return <tabBarSet />;
    }

    /*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
    render(){
        const tabBarSet = {
            borderWidth:1,
            borderColor:'#0c6',
        }
        return(
            <Page>

                <Content bg='#fff' mt='48'>
                    <Row>
                    
                        <Tabs
                            tabs={this.state.tabList}
                            tabBarUnderlineStyle={tabBarSet} 
                            tabBarInactiveTextColor={'rgb(81, 81, 81)'} 
                            tabBarActiveTextColor='#0c6' 
                            >
                            <Row pt='100' x='center' y='center'>
                                <ItemY x='center' y='center'>
                                    <Image source={require('../../../../assets/u2554.png')} w='56' h='56' mb='10'></Image>
                                    <Text color='#aeaeae' size='13'>  暂无记录~</Text>
                                </ItemY>
                            </Row>
                        </Tabs>
                    </Row>
                    
                </Content>
                
                {/* 顶部 star */}
                <Header h='48' y='center' bg='#fff' style={{ borderBottomColor:"#eee", borderBottomWidth:1 }}>
                    <Between px='10'>
                        <TouchOpacity active={0.6} onPress={(e)=> {
                            this.Nav.goBack()
                        }}>
                            <Icon type='left' size='md' color='#00CC66' />
                        </TouchOpacity>

                        <Text size='17'>我的收藏</Text>
                        <Text></Text>
                    </Between>
                </Header>
                {/* 顶部 star */}
            </Page>
        )
    }
}
